<template>
  <div class="padding-t-20">
    <q-table
      class="users-table scroll my-sticky-virt scroll-table myTable inherit"
      style="max-height: 500px;margin: 0"
      :columns="tableColumns"
      :data="tableData"
      row-key="id"
      :pagination.sync="pagination"
      no-data-label="暂无数据"
      color="primary"
      :loading="isTableLoading"
      :hide-bottom="tableData.length !== 0"
    >
      <template v-slot:body-cell-repairOrder="props">
        <q-td>
          <q-btn flat color="primary" :label="props.row.repairOrder" @click="toRepairOrder(props.row.repairOrder)" />
        </q-td>
      </template>
      <template v-slot:body-cell-status="props">
        <q-td>
          <div>
            <div class="status"
                 :style="{backgroundColor: judgeStatus(props.row.status, 'color')}" />
            <span>{{ judgeStatus(props.row.status, 'name') }}</span>
          </div>
        </q-td>
      </template>
      <template v-slot:no-data>
        <div class="full-width row flex-center font-size-14" style="color: #999">
          暂无数据
        </div>
      </template>
    </q-table>
    <!--  分页-->
    <pagination v-model="pagination.page"
                :page-size="pagination.rowsPerPage"
                :total="pagination.rowsNumber"
                @changePageSize="onPageSizeChange"
                @changePage="onPageChange"
                style="padding-right: 44px;position: initial" />
  </div>
</template>

<script>
import { getRepairList } from 'src/boot/tpm/equipment-record'
import Pagination from 'src/components/pagination/index'

export default {
  name: 'repair-order',
  components: {
    Pagination
  },
  props: {
    data: Object
  },
  data () {
    return {
      isTableLoading: false,
      // 表格分页配置
      pagination: {
        // 当前页码
        page: 1,
        // 每页条数
        rowsPerPage: 15,
        // 总条数
        rowsNumber: 0
      },
      id: null,
      // 表格列
      tableColumns: [
        { name: 'repairOrder', field: 'repairOrder', label: '维修单号', align: 'left' },
        { name: 'deviceNum', field: 'deviceNum', label: '设备编号', align: 'left' },
        { name: 'deviceName', field: 'deviceName', label: '设备名称', align: 'left' },
        { name: 'deviceTypeName', field: 'deviceTypeName', label: '设备类型', align: 'left' },
        { name: 'workShop', field: 'workShop', label: '所在车间', align: 'left' },
        { name: 'status', field: 'status', label: '维修状态', align: 'left' },
        { name: 'receivingUserName', field: 'receivingUserName', label: '维修人', align: 'left' }
      ],
      tableData: []
    }
  },
  watch: {
    data: {
      handler (val) {
        if (val.id !== this.id) {
          this.id = val.id
          this.pagination.page = 1
          this.pagination.rowsPerPage = 15
          this.getList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    this.initData()
  },
  methods: {
    initData () {
      const status = Object.entries(this.Enums.DEVICE_REPAIR_STATUS).map(entry => {
        return {
          value: entry[1].value,
          label: entry[1].desc,
          color: entry[1].color
        }
      })
      this.status = status
    },
    getList () {
      let params = {
        pageNum: this.pagination.page,
        pageSize: this.pagination.rowsPerPage,
        deviceId: this.id
      }
      this.isTableLoading = true
      getRepairList(params).then(res => {
        console.log(res, 'res')
        res.records.forEach(item => {
          item.deviceNum = this.$utils.label(item.deviceNum)
          item.deviceName = this.$utils.label(item.deviceName)
          item.deviceTypeName = this.$utils.label(item.deviceTypeName)
          item.workShop = this.$utils.label(item.workShop)
          item.receivingUserName = this.$utils.label(item.receivingUserName)
        })
        this.tableData = res.records
        this.pagination.rowsNumber = res.total
      }).finally(() => {
        this.isTableLoading = false
      })
    },
    // 跳转维修列表
    toRepairOrder (repairOrder) {
      this.$router.push({
        name: 'repairList',
        params: {
          repairOrder: repairOrder
        }
      })
    },
    // 过滤状态枚举
    judgeStatus (statusCode, type) {
      if (type === 'name') {
        const name = this.status.find(o => o.value === statusCode).label
        return name
      } else {
        const color = this.status.find(o => o.value === statusCode).color
        return color
      }
    },
    onPageSizeChange: function (val, page) {
      this.pagination.rowsPerPage = val
      page && (this.pagination.page = page)
      this.getList()
    },
    onPageChange: function (val) {
      this.pagination.page = val
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
